@mdn/browser-compat-data

What is @mdn/browser-compat-data?

@mdn/browser-compat-data is a comprehensive dataset that provides browser compatibility information for various web technologies, including HTML, CSS, JavaScript, and more. It is maintained by MDN Web Docs and is useful for developers who need to know which features are supported by different browsers.

What are @mdn/browser-compat-data's main functionalities?

Check CSS property support

This feature allows you to check the browser compatibility of a specific CSS property. In this example, it checks the compatibility of the 'border-radius' property.

const bcd = require('@mdn/browser-compat-data');
const css = bcd.css.properties;
console.log(css['border-radius']);

Check JavaScript API support

This feature allows you to check the browser compatibility of a specific JavaScript API. In this example, it checks the compatibility of the 'Promise' API.

const bcd = require('@mdn/browser-compat-data');
const js = bcd.javascript.builtins;
console.log(js['Promise']);

Check HTML element support

This feature allows you to check the browser compatibility of a specific HTML element. In this example, it checks the compatibility of the 'video' element.

const bcd = require('@mdn/browser-compat-data');
const html = bcd.html.elements;
console.log(html['video']);

Other packages similar to @mdn/browser-compat-data

caniuse-lite

caniuse-lite is a smaller, more compact version of the data from caniuse.com. It provides browser support tables for various web technologies. Compared to @mdn/browser-compat-data, caniuse-lite is more lightweight and focuses on providing quick access to compatibility data.

browserslist

browserslist is a tool that allows you to specify which browsers you want to support in your project. It uses data from caniuse-lite to determine browser compatibility. While @mdn/browser-compat-data provides detailed compatibility information, browserslist helps you configure your project to support specific browsers.

README

@mdn/browser-compat-data

https://github.com/mdn/browser-compat-data

This repository contains compatibility data for Web technologies. Browser compatibility data describes which platforms (where "platforms" are usually, but not always, web browsers) support particular Web APIs.

This data can be used in documentation, to build compatibility tables listing browser support for APIs. For example: Browser support for WebExtension APIs.

Read how this project is governed.

Chat on chat.mozilla.org#mdn.

Installation

You can install @mdn/browser-compat-data as a node package.

npm install @mdn/browser-compat-data

Usage

const bcd = require('@mdn/browser-compat-data');
bcd.css.properties.background;
// returns a compat data object (see schema)

Repository contents

There's a top-level directory for each broad area covered: for example, "http", "javascript", "webextensions". Inside each of these directories is one or more JSON file containing the compatibility data.

• api/ contains data for each Web API interface.

• css/ contains data for CSS properties, selectors, and at-rules.

• html/ contains data for HTML elements, attributes, and global attributes.

• http/ contains data for HTTP headers, statuses, and methods.

• javascript/ contains data for JavaScript built-in Objects, statement, operators, and other ECMAScript language features.

• mathml/ contains data for MathML elements, attributes, and global attributes.

• svg/ contains data for SVG elements, attributes, and global attributes.

• webdriver/ contains data for WebDriver commands.

• webextensions/ contains data for WebExtensions JavaScript APIs and manifest keys.

• xpath/ contains data for XPath axes, and functions.

• xslt/ contains data for XSLT elements, attributes, and global attributes.

Format of the browser compat json files

The definitive description of the format used to represent compatibility data is the schema file. You can also have a look at the schema documentation.

Issues?

If you find a problem, please file a bug.

Contributing

We're very happy to accept contributions to this data. See Contributing to browser-compat-data for more information.

Projects using the data

Here are some projects using the data, as an npm module or directly:

• Add-ons Linter - the Add-ons Linter is used on addons.mozilla.org and the web-ext tool. It uses browser-compat-data to check that the Firefox version that the add-on lists support for does in fact support the APIs used by the add-on.
• Browser Compatibility Data Explorer - View, search, and visualize data from the compatibility dataset.
• caniuse - In addition to the existing caniuse database, caniuse includes features from the MDN BCD project, formatted and interactive like any other caniuse support table.
• Compat Report - Firefox Add-on that shows compatibility data for the current site in the developer tools.
• compat-tester - Scan local documents for compatibility issues.
• Visual Studio Code - Shows the compatibility information in the code completion popup.
• webhint.io - Hints to check if your CSS HTML and JavaScript have deprecated or not broadly supported features.
• WebStorm - JavaScript IDE allowing you to check whether all CSS properties you use are supported in the target browser version.
• Hexo Plugin: hexo-compat-report - Allows to embed MDN's compatibility table in a hexo blog post.

Acknowledgments

Thanks to:

The BrowserStack Open Source Program for testing services

Sauce Labs Open Source for testing services